// web/src/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/page.tsx
import React from 'react';
import {db} from "@/lib/db";
import {redirect} from "next/navigation";
import {currentUser} from "@/lib/auth";
import IconBadge from "@/components/learn/icon-badge";
import {CircleDollarSign, CircleDollarSignIcon, File, LayoutDashboardIcon, ListChecks} from "lucide-react";
import TitleForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/title-form";
import DescriptionForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/description-form";
import ImageForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/image-form";
import CategoryForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/category-form";
import PriceForm from '@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/price-form';
import AttachmentForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/attachment-form";
import ChaptersForm from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/chapters-form";
import Banner from "@/components/learn/banner";
import CourseActions from "@/app/learn/(dashboard)/(routes)/teacher/courses/[courseId]/_components/course-actions";

const Page = async ({params}: { params: { courseId: string } }) => {
    const user = await currentUser()
    if (!user) return redirect(`/`)

    const course = await db.course.findUnique({
        where: {id: params.courseId},
        include: {
            chapters: {
                orderBy: {
                    position: 'asc'
                }
            },
            attachments: {
                orderBy: {
                    // 创建时间降序
                    createdAt: "desc"
                }
            }
        }
    })

    const categories = await db.category.findMany({
        orderBy: {
            // 按name升序
            name: 'asc'
        }
    })

    if (!course) return redirect(`/`)

    const requiredFields = [
        course.title,
        course.description,
        course.imageUrl,
        course.price,
        course.categoryId,
        course.chapters.some(c => c.isPublished)
    ]

    const totalFields = requiredFields.length
    // 用于从数组中删除null和未定义的值。
    const completedFields = requiredFields.filter(Boolean).length

    const completionText = `(${completedFields} / ${totalFields})`

    const isComplete = requiredFields.every(Boolean)

    return (
        <>
            {!course.isPublished && (
                <Banner
                    label={`This course is unpublished. It will not be visible to the students.`}
                />
            )}
            <div className={`p-6`}>
                <div className={`flex items-center justify-between`}>
                    <div className={`flex flex-col gap-y-2`}>
                        <h1 className={`text-2xl font-medium`}>
                            Course setup
                        </h1>
                        <span className={`text-sm text-slate-700`}>
                            Complete all fields {completionText}
                        </span>
                    </div>
                    <CourseActions
                        courseId={params.courseId}
                        disabled={!isComplete}
                        isPublished={course.isPublished}
                    />
                </div>
                <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 mt-16`}>
                    <div>
                        <div className={`flex items-center gap-x-2`}>
                            <IconBadge
                                icon={LayoutDashboardIcon}/>
                            <h2 className={`text-xl`}>
                                Customize your course
                            </h2>
                        </div>
                        <TitleForm
                            initialData={course}
                            courseId={course.id}
                        />
                        <DescriptionForm
                            // @ts-ignore
                            initialData={course}
                            courseId={course.id}
                        />
                        <ImageForm
                            // @ts-ignore
                            initialData={course}
                            courseId={course.id}
                        />
                        <CategoryForm
                            options={categories.map((c) => ({
                                label: c.name,
                                value: c.id
                            }))}
                            // @ts-ignore
                            initialData={course}
                            courseId={course.id}
                        />
                    </div>
                    <div className={`space-y-6`}>
                        <div>
                            <div className={`flex items-center gap-x-2`}>
                                <IconBadge
                                    icon={ListChecks}
                                />
                                <h2 className={`text-xl`}>
                                    Course chapters
                                </h2>
                            </div>
                            <ChaptersForm
                                initialData={course}
                                courseId={course.id}
                            />
                        </div>
                        <div>
                            <div className={`flex items-center gap-x-2`}>
                                <IconBadge icon={CircleDollarSign}/>
                                <h2 className={`text-xl`}>
                                    Sell your course
                                </h2>
                            </div>
                            <PriceForm
                                initialData={course}
                                courseId={course.id}
                            />
                        </div>
                        <div>
                            <div className={`flex items-center gap-x-2`}>
                                <IconBadge icon={File}/>
                                <h2 className={`text-xl`}>
                                    Resources & Attachments
                                </h2>
                            </div>
                            <AttachmentForm
                                initialData={course}
                                courseId={course.id}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Page;